<template>
	<div class="mainbody" v-resize="handleResize">
		<slot></slot>
	</div>
</template>

<script>
	export default {
		props: {
			value: {
				type: String,
				default: 'right',
			},
		},
		methods: {
			//改变表单对齐方式
			handleResize (w) {
				let labelPosition = 'right';
				if(w < 500) {
					labelPosition = 'top';
				}
				this.$emit('input', labelPosition);
			},
		},
		//使用局部注册指令的方式
		directives: {
			resize: { // 指令的名称
				bind (el, binding) { //el为绑定的元素，binding为绑定给指令的对象
					let width = '', height = '';
					function isReize () {
						const style = document.defaultView.getComputedStyle(el);
						if (width !== style.width || height !== style.height) {
							binding.value(parseInt(style.width), parseInt(style.height));  //关键
						}
						width = style.width;
						height = style.height;
					}
					el.__vueSetInterval__ = setInterval(isReize, 300);
				},
				unbind (el) {
					clearInterval(el.__vueSetInterval__);
				}
			},
		},
	}
</script>

<style lang="scss">
</style>